<template>
  <el-dialog
    v-el-drag-dialog="{ heightFixed: true, resize: resize, updataFull, updataDialogWidth }"
    :fullscreen="isfullscreen"
    :append-to-body="true"
    :width="setDialogWidth('1200px')"
    :visible="dialogVisible"
    :title="$t('FAULT_LOCATION')"
    @open="open"
    @close="close"
  >
    <div v-if="dialogVisible" class="h-100 w-100 flex">
      <gis-map
        ref="gisMap"
        class="flex-1"
        map-id="faultLocationMap"
        show-type="faultLocation"
        :is-home="false"
        :nodes="nodes"
        :edges="edges"
        @faultReady="setFaultLocation"
      />
      <Navigate
        v-if="mapConfig.onlineMap"
        :fault-location="faultLocation"
        @setNavPath="setNavPath"
      />
    </div>
    <template v-slot:footer>
      <template>
        <el-button @click="close">{{ $t('CANCEL') }}</el-button>
      </template>
    </template>
  </el-dialog>
</template>
<script>
  import topoPositionApi from '@/api/oen/TopoPositionApi'
  import { formatEdges, formatNodes } from '@/views/module/home/components/vis/js/format'
  import gisMap from '@/views/module/home/components/gis'
  import Navigate from './Navigate'
  import { changeDecimal } from '@/utils/common'
  const mapConfig = window.__mapConfig__

  export default {
    components: {
      gisMap,
      Navigate
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      params: {
        type: Object,
        default() {
          return {
            type: 'add'
          }
        }
      }
    },
    data() {
      return {
        faultLocation: [],
        nodes: [],
        edges: [],
        mapConfig: mapConfig
      }
    },
    provide() {
      return {
        functionName: 'faultLocation'
      }
    },
    methods: {
      resize() {
        this.$refs.gisMap.map.updateSize()
      },
      open() {
        // console.log('open', this.params)
        this.getTopos()
      },
      getTopos() {
        this.nodes = []
        this.edges = []
        topoPositionApi
          .getTopos()
          .then(res => {
            let nodes = []
            let edges = []
            if (res && res.nodes) {
              nodes = formatNodes(res.nodes)
            }
            if (res && res.edges) {
              edges = formatEdges(res.edges)
            }
            const edgeList = []
            const nodeList = []
            edges.forEach(i => {
              if (this.params.cableIdList.includes(i.cableId)) {
                edgeList.push(i)
                nodeList.push(i.fromNodeId)
                nodeList.push(i.toNodeId)
              }
            })
            this.edges = edgeList.sort(
              (a, b) =>
                this.params.cableIdList.indexOf(a.cableId) -
                this.params.cableIdList.indexOf(b.cableId)
            )
            this.nodes = nodes.filter(i => nodeList.includes(i.nodeId))
            this.$store.commit('setStationSelected', nodeList)
            this.$store.commit('setGisActived', {
              cableIds: this.params.cableIdList,
              nodeIds: nodeList,
              color: 'normal'
            })
            setTimeout(() => {
              this.getFaultPoint()
            })
          })
          .catch(err => {
            console.log(err)
          })
      },
      getFaultPoint() {
        let totalPath = []
        let preStation = this.params.startStaionId
        this.edges.forEach(i => {
          let curPath = []
          if (i.fromNodeId === preStation) {
            curPath = [...i.path]
            preStation = i.toNodeId
          } else {
            curPath = [...i.path.reverse()]
            preStation = i.fromNodeId
          }
          totalPath = [...totalPath, ...curPath]
        })
        const errPercent = changeDecimal(this.params.fiberLength / this.params.targetFiberLength)
        this.$refs.gisMap.setFaultPoint(totalPath, errPercent)
      },
      setNavPath(data) {
        this.$refs.gisMap.setNavPath(data)
      },
      setFaultLocation(data) {
        this.faultLocation = data
      },
      close() {
        this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-dialog__wrapper :deep(.el-dialog__body) {
    position: relative;
    padding: 0;
    height: 60vh;
  }
</style>
